<template>
  <div class="hold list-page">
    <div class="function-area">
      <SelectStrategy v-model:id="form.strategyId" />
      <SelectPlatform v-model:id="form.platformId" />
      <SelectCategory v-model:id="form.categoryId" />
      <el-button class="function-btn" @click="toAdd">添加持仓</el-button>
    </div>
    <div class="list-area">
      <el-table :data="holdList" height="100%" @row-dblclick="toDetail">
        <el-table-column
          label="名字"
          show-overflow-tooltip
          min-width="25"
          prop="name"
          align="center"
        />
        <el-table-column
          label="策略"
          min-width="30"
          show-overflow-tooltip
          prop="strategyName"
          align="center"
        />

        <el-table-column
          label="平台"
          min-width="20"
          show-overflow-tooltip
          prop="platFormName"
          align="center"
        />

        <el-table-column label="代码" min-width="25" prop="code" align="center">
          <template #default="{ row }">
            {{ row.code || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="数量" min-width="30" prop="holdNum" align="center" />
        <el-table-column label="成本价" min-width="25" prop="holdPrice" align="center" />

        <el-table-column label="现价" min-width="30" prop="latestPrice" align="center">
          <template #default="{ row }">
            {{ row.latestPrice || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="现价更新" min-width="38" prop="priceTime" align="center">
          <template #default="{ row }">
            {{ dayjs(+row.priceTime).format(TIME_FORMAT) || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="涨跌幅" min-width="30" prop="riseAndFall" align="center">
          <template #default="{ row }"> {{ row.riseAndFall || '-' }} </template>
        </el-table-column>
        <el-table-column label="持仓市值" min-width="35" prop="holdValue" align="center">
          <template #default="{ row }">
            {{ (+row.holdValue).toFixed(2) || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="收益" min-width="35" prop="holdEarnings" align="center">
          <template #default="{ row }">
            {{ (+row.holdEarnings).toFixed(2) ?? '-' }}
          </template>
        </el-table-column>
        <el-table-column label="收益率" min-width="35" prop="holdEarningsPercent" align="center">
          <template #default="{ row }">
            {{ row.holdNum ? row.holdEarningsPercent : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="50" align="center">
          <template #default="{ row }">
            <el-button v-if="row.type === 'currency'" type="text" @click="toShowUpdate(row)"
              >更新</el-button
            >
            <el-button type="text" @click="toAddExchange(row)">记录</el-button>
            <el-button type="text" @click="toEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <BetterPagination v-model:pageInfo="pageInfo" />

    <el-dialog v-model="showUpdateDialog" title="最新市值">
      <UpdateValue
        v-if="showUpdateDialog"
        :form="activeItem!"
        :handle-edit-hold-item="handleEdit"
        @close="showUpdateDialog = false"
        @confirm="handleConfirmUpdate"
      />
    </el-dialog>

    <el-dialog v-model="showDialog" :title="dialogTitle">
      <HoldInfo
        v-if="showDialog"
        :aim="aim"
        :info="activeItem!"
        @close="showDialog = false"
        @confirm="toConfirm"
      />
    </el-dialog>

    <el-dialog v-model="showAddExchangeDialog" title="记录交易">
      <ExchangeInfo
        v-if="showAddExchangeDialog"
        :info="activeItem!"
        :update-hold="handleEdit"
        @close="showAddExchangeDialog = false"
        @refresh="queryHoldList"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import BetterPagination from '@/components/BetterPagination/index.vue'
import SelectPlatform from '@/components/SelectPlatform/index.vue'
import SelectStrategy from '@/components/SelectStrategy/index.vue'
import SelectCategory from '@/components/SelectCategory/index.vue'

import HoldInfo from './HoldInfo.vue'
import ExchangeInfo from './ExchangeInfo.vue'
import UpdateValue from './UpdateValue.vue'

import { useList } from '@/hooks/useList'
import { useLatestPrice } from './useLatestPrice'
import type { HoldItem } from '@/indexDB/initHold'

import { useHold } from './useHold'

import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import { TIME_FORMAT } from '@/utils/time'

const {
  list, // 全量的
  showDialog,
  dialogTitle,
  aim,
  activeItem,
  toAdd,
  toEdit,
  toDetail,
  handleEdit,
  handleConfirm
} = useList<HoldItem>({
  listKey: 'holdList'
})

const showUpdateDialog = ref(false)
const toShowUpdate = (item: HoldItem) => {
  activeItem.value = item
  showUpdateDialog.value = true
}
const handleConfirmUpdate = () => {
  showUpdateDialog.value = false
  queryHoldList()
}

const showAddExchangeDialog = ref(false)
const toAddExchange = (info: HoldItem) => {
  showAddExchangeDialog.value = true
  activeItem.value = info
}

if (!import.meta.env.DEV) {
  setTimeout(() => {
    list.value?.forEach((item) => {
      useLatestPrice(item, handleEdit)
    })
  }, 300)
}

const { holdList, form, pageInfo, queryHoldList } = useHold(10)

const toConfirm = (item: HoldItem) => {
  handleConfirm(item)?.then(() => {
    if (item.code) {
      useLatestPrice(item, handleEdit)
    }
    queryHoldList()
  })
}

watch(form.value, () => {
  pageInfo.value.pageNum = 1
})
</script>

<style lang="scss" scoped>
@import '@/assets/list.scss';

.function-area {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 20px;
  .function-btn {
    grid-column: 8;
  }
}
</style>
